<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手写jsonp</title>
  </head>
  <body>
    <script>
      // 实现跨域 通过jsonp的原来跨域
      // jsonp("url").then(result => { })
      function jsonp(url) {
        return new Promise(function (resolve, reject) {
          // 要根据jsonp的实现原理 做跨域请求
          // script的src不受同源策略的限制
          // src不受跨域的限制 => url给src => 跨域会返回一段执行代码 => 对应的函数接收这个代码数据
          let script = document.createElement("script"); // 创建一个标签

          // 定义一个回调的方法 -> 将方法名传入到url -> 调用对应的方法
          // 创建了一个高频方法 - 用完方法之后 - 销毁
          // 方法不能是固定的
          const callbackName = `callback${Date.now()}`; // 随机会生成一个方法名
          // 如何定义一个全局方法
          window[callbackName] = function (data) {
            // data就是返回的数据
            // console.log(data);
            resolve(data); // 此时任务已经结束
            delete window[callbackName]; // 销毁方法
            document.body.removeChild(script); // 移除标签
          };
          url += "?callback=" + callbackName;
          script.src = url; // 赋值标签内容

          document.body.append(script); // 将标签加到页面上
        });
      }
      jsonp("http://www.liulongbin.top:3009/api/jsonp").then((result) => {
        console.log(result);
      });
    </script>
  </body>
</html>
